<template>
  <div class="user_bg">
    <div class="user_table">
      <span style="padding-bottom:10px;font-size: 15px"> 请输入旧密码</span>
      <Input v-model="user.old_pass" placeholder="老密码" style="width: 300px"/>
      <span style="padding-top: 10px;padding-bottom:10px;font-size: 15px"> 请输入新密码</span>
      <Input v-model="user.new_pass_one" placeholder="新密码" style="width: 300px"/>
      <span style="padding-top: 10px;padding-bottom:10px;font-size: 15px"> 请确认新密码</span>
      <Input v-model="user.new_pass_two" placeholder="新密码" style="width: 300px"/>

      <Button @click="changePass(user)" style="margin-top: 20px" type="success" long>确认提交</Button>
    </div>
  </div>

</template>

<script>
  import utils from '@/utils/user'
  export default {
    name: 'study',
    data () {
      return {
        user: {
          old_pass: null,
          new_pass_one: null,
          new_pass_two: null,
        },
        message: 'Welcome to Your Vue.js App',
      }
    },
    methods: {
      changePass(user){
        this.$Loading.start();
        if (user.old_pass.length < 6 || user.new_pass_one.length < 6 || user.new_pass_two.length < 6) {
          this.$Message.warning("密码长度最小为6位")
          this.$Loading.error()
          return
        }
        if (user.new_pass_two !== user.new_pass_one) {
          this.$Message.warning("请设置相同的新密码")
          this.$Loading.error()
          return
        }
        if (user.old_pass === user.new_pass_one) {
          this.$Message.warning("新旧密码不能一样")
          this.$Loading.error()
          return
        }
        this.$Loading.finish()
        this.axios.post("user/change_pass", {
          password: user.old_pass,
          new_password: user.new_pass_two
        }).then((data) => {
          if (data) {
            this.$Message.success('修改密码成功，请重新登录')
            utils.clearToken()
            this.$router.push('/login')
          }
        })
      }
    }

  }
</script>
<style rel="stylesheet/less" lang="less" scoped>
  .user_bg {
    width: 90%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    .user_table {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }
  }
</style>
